/* Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

body:is(:not(.video), .taking, .camera-configuring, .should-handle-intent-result) #record-types-group {
  display: none;
}

body:is(:not(.video), :not(.taking), :not(.enable-gif-recording)) #shutter-progress-bar {
  display: none;
}

@keyframes ring-countdown {
  0% {
    /* Set 999999 distance to next strip so that only first strip is visible. */
    stroke-dasharray: 0 999999;
  }
  100% {
    stroke-dasharray: var(--inner-perimeter) 999999;
  }
}

body.video.taking.enable-gif-recording #shutter-progress-bar>circle {
  animation: ring-countdown 5s linear;
  animation-fill-mode: forwards;
}

body.video.taking.enable-gif-recording:not(.recording) #shutter-progress-bar>circle {
  animation-play-state: paused;
}

#shutter-progress-bar {
  --bar-width: 4px;
  --inner-perimeter: calc((var(--outer-radius) - var(--bar-width)) * 2 * 3.1416);
  --outer-radius: 40px;
  --stroke-width: 4px;
  --svg-size: calc(var(--outer-radius) * 2 - var(--bar-width));

  fill: transparent;
  height: var(--svg-size);
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--svg-size);
}

#shutter-progress-bar>circle {
  cx: 50%;
  cy: 50%;
  r: calc(var(--outer-radius) - var(--bar-width));
  stroke: white;
  stroke-width: var(--bar-width);
  /* The dash strip will appear from 3 o'clock direction while we want to start
   * from 12 o'clock. Rotate 90deg counterclockwise accordingly. */
  transform: rotate(-90deg);
  transform-origin: center;
}
